<template>
  <div class="sub-box-border body" v-loading="loading">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/usermanagement/homework">
            <a style="cursor: pointer;">
              <b>作业集</b>
            </a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <div style="width: 400px;">
      <el-form label-position="right" label-width="80px">
        <el-form-item label="作业名称:">
          {{collection.collectionName}}
        </el-form-item>
        <el-form-item label="作业介绍:">
          <el-input type="textarea" disabled v-model="collection.collectionIntroduction"></el-input>
        </el-form-item>
        <el-form-item label="作业要求:">
          <el-input type="textarea" disabled v-model="collection.collectionRequest"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="sub-margin">
      <a v-if="homework.homeworkFileAddress!=null" :href="downloadAddress" :download="homework.homeworkFileAddress">
        <el-button type="success">
          下载文件
        </el-button>
      </a>
    </div>
    <div class="sub-margin">
      提交内容
    </div>
    <div class="sub-margin box-standard content-box">
      <div class="content box-shadow" v-html="homework.homeworkContent">
      </div>
    </div>
    <div class="sub-margin evaluate-box">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="homework.homeworkState" placeholder="请选择" disabled>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价">
          <el-input v-model="homework.homeworkEvaluate" disabled></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="homework.homeworkGrade" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="evaluate()">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
      name: "HomeworkInfomation",
      data(){
        return {
          loading: true,
          collection:{
            collectionName: 'embedded',  //题目集名称
            collectionIntroduction: '测试用',  //题目集的介绍
            collectionRequest: '按时完成',
            collectionCreateTime: '2016-05-02'  //创建时间
          },
          homework:{
            homeworkId: 1,
            homeworkName: '关晨亮',  //提交的用户姓名
            homeworkSubmitTime: '2016-05-02',  //提交时间
            homeworkState: 0,
            homeworkEvaluate: '提交成功',  //当前评价
            homeworkContent: '<p>这是一段html内容<p>',
            homeworkGrade: '',  //评分
          },
          options: [{
            value: 0,
            label: '已提交',
            disabled: true
          }, {
            value: 1,
            label: '已通过'
          }, {
            value: 2,
            label: '打回修改'
          }]
        }
      },
      computed:{
        downloadAddress:function(){
          let data = this.$data;
          return '/homework/filedownload?homeworkId='+data.homework.homeworkId
        }
      },
      methods:{
        getCollection:function(){
          let data = this.$data;
          let that = this;
          let qs = require("qs");
          this.axios.post("/collection/showcollection",qs.stringify({
            collectionId: data.collection.collectionId
          }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                data.collection = resData.data;
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
            })
        },
        getHomework:function () {
          let data = this.$data;
          let that = this;
          let qs = require("qs");
          this.axios.post("/homework/showhomework",qs.stringify({
            homeworkId: data.homework.homeworkId
          }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                data.homework = resData.data;
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
              data.loading = false;
            })
        },
        evaluate:function(){
          let data = this.$data;
          let that = this;
          let qs =require("qs");
          this.axios.post("/homework/evaluate",qs.stringify(data.homework))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                this.$message({
                  type: "success",
                  message: resData.data
                })
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
            })
        },
      },
      created:function(){
        let data = this.$data;
        data.homework.homeworkId = 17;
        data.collection.collectionId = 3;
        this.getCollection();
        this.getHomework();
      }
    }
</script>

<style scoped>
  .body{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .el-divider--horizontal{
    margin: 12px 0px;
  }

  content-box{
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .content{
    width: 100%;
    height: 500px;
    overflow: auto;  /*非默认选项*/
  }

  .evaluate-box{
    width: 500px;
  }
</style>
